<template>
	<view>
		<view class="uni-container">
			<uni-table :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">部门</uni-th>
					<uni-th align="center">职员</uni-th>
					<uni-th align="center">计划标题</uni-th>
					<uni-th align="center">完成时间</uni-th>
					<uni-th align="center">结果</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td width="150" align="center">
						<view class="mycontent">
							{{item.user.department.name}}
						</view>
					</uni-td>
					<uni-td width="150" align="center">
						<view class="mycontent">
							{{item.user.name}}
						</view>
					</uni-td>
					<uni-td width="150" align="center">
						<view class="mycontent">
							{{item.title}}
						</view>
					</uni-td>
					<uni-td width="200" align="center">
						<view>
							{{item.completeTime}}
						</view>
					</uni-td>
					<uni-td width="150" align="center">
						<view>
							{{item.stateName}}
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<uni-pagination :total="total" :pageSize="params.size" prev-text="前一页" next-text="后一页"
				@change="doChangePage" />
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		watchEffect
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import http from "@/utils/http";
	import {
		formatDate
	} from '@/utils/dateUtil.js' //日期格式化
	//参数
	const props = defineProps({
		defaultDepart: {
			type: Object,
			default: undefined
		},
		message: {
			type: String,
			default: ""
		}
	})
	//变量
	const params = ref({
		page: 1,
		size: 7
	});
	const tableData = ref([]);
	const total = ref(0);
	const loading = ref(false);
	let defp = null;
	//onLoad方法
	onLoad(() => {

	});
	watchEffect((onInvalidate) => {
		//使用这个函数的时候会执行一次里边的代码,因为这里打印了message.value
		//message是ref响应式变量
		//所以后续检测到message值的变化，就会再次执行effect里边的代码
		if (!props.defaultDepart)
			return;
		params.value.departIds = getAllDepartIds().join(',');
		params.value.workDate = formatDate(new Date(), "yyyy-MM-dd");
		loading.value = true;
		http.post("/personalPlan/getDepartmentDailyPlan", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});;
		// console.log("message 被修改了", props.message)
		//如果是下边这种情况，没有message.value
		//那么只会在注册effect的时候执行一次，后续不再执行
		// console.log("这次没有message被修改了")
		onInvalidate(() => {
			//当组件失效，watchEffect被主动停止或者副作用即将重新执行时，这个函数会执行
		})
	});
	//方法
	//翻页
	function doChangePage(e) {
		console.log(e)
		params.value.page = e.current;
		params.value.departIds = getAllDepartIds().join(',');
		params.value.workDate = formatDate(new Date(), "yyyy-MM-dd");
		loading.value = true;
	}

	function getAllDepartIds() { //获取所有部门id
		let ids = [];
		if (props.defaultDepart == undefined || props.defaultDepart[0] == undefined) {
			return ids;
		}
		ids.push(props.defaultDepart[0].id);
		//获取子部门id
		function getChildDepartIds(depart) {
			let arr = [];
			if (!depart.children || depart.children.length == 0) {
				return arr;
			}
			for (let i = 0; i < depart.children.length; i++) {
				arr.push(depart.children[i].id);
				arr = arr.concat(getChildDepartIds(depart.children[i]))
			}
			return arr;
		}
		ids = ids.concat(getChildDepartIds(props.defaultDepart[0]));
		return ids;
	}
</script>
<style scope>
	.mycontent{
		width: 300rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>